<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<h3>导航面包屑</h3>
<p>浅色背景</p>
<j-breadcrumb [routesConfig]="routes" separator=">" [generatorContext]="this"></j-breadcrumb>
<p>深色背景</p>
<j-breadcrumb [routesConfig]="routes" separator=">" [generatorContext]="this" theme="dark"></j-breadcrumb>
<h3>内页面包屑</h3>
<j-breadcrumb [routesConfig]="routes" separator=">" [generatorContext]="this" theme="inner"></j-breadcrumb>

<h3>简易路由</h3>
<p>点击下面的超链切换路由，面包屑会根据路由自行设置面包屑路径。</p>

<ng-container *ngFor="let productType of productTypeList; last as isLast">
    <a routerLink="list/{{productType.id}}">{{productType.name}}</a> <span *ngIf="!isLast">| </span>
</ng-container>
<hr>
<router-outlet></router-outlet>
